<template>
    <el-drawer
    :title="this.$t('buttons.downloadMap')"
    :visible.sync="drawer"
    :close-on-press-escape="false"
    custom-class="branchBox"
    :wrapperClosable="closable"
    :show-close="showClose"
    :direction="direction"
    @close="closeDrawer">
        <div class="downloadBox">
            <el-radio-group v-model="downloadRadio" size="small">
                <el-radio-button label="map"></el-radio-button>
                <el-radio-button label="map_edit"></el-radio-button>
            </el-radio-group>
            
            <div class="flex formBtns">
                <el-button type="primary" @click="submitDownloadBtn(true)">{{ this.$t("buttons.confirm")}}</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
import { showDownloadMap, subMapEdit } from '../js/map';
export default {
    name: 'mapDownload',
    components:{
        
    },
    data(){
        return{
            drawer: this.$store.state.downloadMap,
            direction: 'btt',
            closable: true,
            showClose: false,

            radio: '',
            downloadRadio: "",
        }
    },
    methods:{
        //确认下载地图
        async submitDownloadBtn(type){
            const that = this;
            switch(type){
                case true:
                    if(that.downloadRadio == ""){
                        that.$message.error('请选择下载图片类型！');
                        return
                    }else if(that.downloadRadio == "map"){
                        that.$loading({
                            text: "加载中"
                        });
                        that.downloadMap("map");
                    }else if(that.downloadRadio == "map_edit"){
                        that.$loading({
                            text: "加载中"
                        });
                        let mapEditBase64 = await subMapEdit();
                        await that.downloadMap("map_edit", mapEditBase64);
                    }
                    that.downLoadDialogVisible = false;
                    break;
                case false:
                    that.downLoadDialogVisible = false;
                    break;
                default:
                    that.downLoadDialogVisible = false;
                    break;
            }
        },

        //下载图片
        async downloadMap(type = "map", base64Data){
            const that = this;
            let imageData = "";
            if(type == "map"){
                imageData = that.$store.state.base64MapData;
            }else{
                imageData = base64Data;
            }
            let aLink = document.createElement('a');
            let bolb = await this.base64ToBolb(imageData);
            let evt = document.createEvent("HTMLEvents");
            evt.initEvent("click", true, true);//事件类型， 是否冒泡， 是否阻止浏览器默认行为
            aLink.download = `${type}.png`;//下载名称
            aLink.href = URL.createObjectURL(bolb);
            aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, canslelable:true, view: window}));//兼容火狐
            that.$loading().close()
        },

        //base64转bolb
        base64ToBolb(code){
            let parts = code.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;
            let uInt8Array = new Uint8Array(rawLength);
            for(let i = 0; i < rawLength; ++i){
                uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], {type:contentType});
        },
        //关闭模态框
        closeDrawer: function(){
            showDownloadMap(false);
        }
    },

    //属性监听
    watch:{
       "$store.state.downloadMap": function(val){
           this.drawer = val;
        }
    }

}
</script>

<style scoped lang="less">
.downloadBox{
    width: 100%;
    padding: 0 15px;
    .formBtns{
        padding: 0 5px;
        margin-top: 25px;
        button{
            width: 100%;
        }
    }
}


</style>